<template>
  <div>
    <nav-bar title="未签到人员">
    </nav-bar>
    <div class="maxinBox backgroundfff">
      <van-dropdown-menu>
        <van-dropdown-item v-model="classGroup" :options="teamList" @change="getNotSignList" />
        <van-dropdown-item v-model="workType" :options="workTypeList" @change="getNotSignList" />
      </van-dropdown-menu>
      <van-row class="team" v-for="(item, index) in dataList" :key="index">
        <van-col :span="5">
          <img style="width: 80%" :src="item.qrCodeUrl" alt="" @click="bigAvatar(item.qrCodeUrl)">
        </van-col>
        <van-col :span="19">
          <van-row>
            <van-col :span="15">
              <div style="color: #666;" class="fontSize14">{{item.name}} ({{item.mobile}})</div>
              <div style="color: #666;" class="fontSize14 marginTop5">{{item.teamName}} {{item.workTypeName}}</div>
            </van-col>
            <van-col :span="9">
              <div style="color: #666;line-height: 3.75rem;color: #225FBA;text-align: right;" class="fontSize14">
                {{item.clockInTime | formatDate('HH:mm:ss')}}进场
              </div>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  import teamAPI from '../../../../api/workAPI/teamAPI.js'
  import moment from 'moment'
  export default {
    data() {
      return {
        classGroup: '',
        workType: '',
        workTypeList: [],
        teamList: [],
        dataList: []
      }
    },
    methods:{
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      // 查询未签到列表
      getNotSignList() {
        let projectId = localStorage.getItem('projectId')
        let data = {
          pageSize: 500,
          pageNum: 1,
          team: this.classGroup,
          workType: this.workType
        }
        teamAPI.getNotSign(projectId, data).then(res => {
          this.dataList = res.list
        })
      },
      // 查询班组列表
      getClassGroup() {
        dashbordAPI.getClassGroup().then(res => {
          this.teamList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.teamList.unshift({
            text: '全部班组',
            value: ''
          })
        })
      },
      // 查询工种列表
      getWorkType() {
        this.workTypeList.unshift({
          text: '全部工种',
          value: ''
        })
        dashbordAPI.getWorkType().then(res => {
          this.workTypeList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.workTypeList.unshift({
            text: '全部工种',
            value: ''
          })
        })
      }
    },
    mounted() {
      this.getNotSignList()
      this.getWorkType()
      this.getClassGroup()
    }
  }
</script>

<style scoped lang="scss">
  .team{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      .van-col--7{
        img{
          width: 100%;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
</style>
